<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>德德后台管理系统</title>
  <link rel="stylesheet" href="./assets/layui/css/layui.css">
</head>

<body>
  <div class="layui-layout layui-layout-admin">

    <!-- 导入头部共公资源 -->
    {{include "./common/header.html"}}

    <div class="layui-side layui-bg-black">
      <!-- 导入左侧部分共公资源 -->
      {{include "./common/side.html"}}
    </div>

    <div class="layui-body">
      <!-- 内容主体区域 -->
      <div style="padding: 15px;">
        <table class="layui-hide" id="cart" lay-filter="test3"></table>
      </div>
    </div>

    <div class="layui-footer">
      <!-- 底部固定区域 -->
      底部固定区域
    </div>
  </div>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>

  <script src="./assets/layui/layui.js"></script>



</body>
<script>
  //JS 
  layui.use('table', function () {
    var table = layui.table;
    var $ = layui.jquery;
    var layer = layui.layer;

    //渲染表格内容
    table.render({
      elem: '#cart'
      , url: '/cartData'
      , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
      }
      , cols: [[
        { field: 'cate_id', width: 80, title: 'ID', sort: true }
        , { field: 'cate_name', width: 260, edit: 'test', title: '分类名称' }
        , { field: 'orderBy', width: 1500, title: '排序', sort: true }
        , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 260 }
      ]]
    });

    //手动编辑
    table.on('edit(test3)', async function (obj) {
      const { data } = obj;
      const result = await $.post('/updcartData', data)
      const { code, message } = result;
      if (code === 0) {
        layer.msg(message)
      }
    })

    //删除
    table.on('tool(test3)', function (obj) {
      let { event, data } = obj
      let { cate_id } = data
      console.log(cate_id);
      if (obj.event === 'del') {
        layer.confirm('你确定删除行么', {
          btn: ['确定', '取消'] //按钮
        },async function (index) {
          const res = await $.post('/delCart', { cate_id })
          const { code, message } = res
          if (code === 0) {
            layer.msg(message)
          }
          layer.close(index)
          setTimeout(function(){
              location.reload()
            },1500)
          
        }, function () {

        });
      }

    });
  });

</script>

</html>